<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相册详情-<?php echo $album->title ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo assets('css/style.css')?>">
</head>
<body>
<div id="header">
  <div id="logo">Album</div>
  <ul>
    <li><a href="javascript:;"><?php echo $user->userName ?></a></li>
    <li><a href="<?= url('image/add', ['g' => $album->id]) ?>">添加图片</a></li>
    <li><a href="<?php echo url('album/logout') ?>">退出</a></li>
  </ul>
</div>
<div id="content">
  <div id="wrapper">
    <div>
      <a href="<?php echo url('index') ?>">首页</a>
      -
      <span><?php echo $album->title?> - </span>
      <span><?php echo $album->description ?></span>
    </div>
    <ul>
     <?php foreach ($album->imageCollection as $image): ?>
      <li style="max-height: 200px;">
        <img style="max-width:300px;max-height:200px;" src="<?php echo assets($image->path) ?>" title="<?php echo $image->title ?>" /><span></span>
        <div style="height:0px;position:relative;top:0px;overflow: hidden;">
          <a href="<?php echo url('image/edit', ['g' => $album->id, 'm' => $image->id]) ?>">编辑</a>
          <a href="<?php echo url('image/delete', ['g' => $album->id, 'm' => $image->id]) ?>">删除</a>
        </div>
      </li>
     <?php endforeach; ?> 
    </ul>
  </div>
</div>
<div id="footer">
   @copyright wanczy-php06 use for PHP OOP demo
</div>
<script type="text/javascript" src="<?php echo assets('js/jquery-1.11.3.min.js') ?>"></script>
<script type="text/javascript">
$('#wrapper ul li').on('mouseenter', function(e) {
  // li 元素的鼠标经过事件 
  $(e.delegateTarget).find('div').animate({
    height: '60px',
    top: '-60px'
  }, 200);
}).on('mouseleave', function(e) {
  $(e.delegateTarget).find('div').animate({
    height: '0px',
    top: '0px'
  }, 200);
});
</script>
</body>
</html>